<template>
	<view class="content">
		<view class="back">
			<view class="back_tle">
				反馈类别
			</view>
			<view class="back_con con_type">
				<view class="con_item con_active">
					BUG
				</view>
				<view class="con_item">
					建议
				</view>
				<view class="con_item">
					安全
				</view>
				<view class="con_item">
					吐槽
				</view>
			</view>
			<view class="back_tle">
				反馈内容
			</view>
			<view class="back_con">
				<u-input v-model="value" :type="type" :border="border" :height="height" placeholder="请填写15字以上描述，以便我们更好地为您提供帮助~" :auto-height="autoHeight" />
				<u-upload ref="uUpload" :max-size="5 * 1024 * 1024" max-count="3" :action="action" :auto-upload="false" ></u-upload>
			</view>
			<view class="back_tle">
				联系方式
			</view>
			<view class="back_con">
				<u-input v-model="value" :type="type" :border="border" :height="height" placeholder="请留下您的邮箱或者电话，方便我们联系您哦~" :auto-height="autoHeight" />
			</view>
			<view class="histor">
				查看历史反馈
			</view>
		</view>
		
		<view class="problem">
			<view class="">
				<text>提交反馈</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [{
					head: "怎么申请发票",
					body: "购买后可以在「我的账户」-「购买订单」中直接填写开票信息申请发票。",
					open: true,
				}, {
					head: "项目找不到",
					body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
					open: false,
				}, {
					head: "如何联系人工客服",
					body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					open: false,
				}],
				value: '',
				type: 'textarea',
				border: false,
				height: 40,
				autoHeight: true,
				// 非真实地址
				action: 'http://www.example.com/upload',
			};
		},
		methods: {

		},
	};
</script>

<style lang="scss" scoped>
	.content {
		.back{
			padding: 0 20rpx;
				box-sizing: border-box;
			.back_tle{
				font-size: 28rpx;
				color: #101010;
				padding: 30rpx 0 30rpx 16rpx;
				box-sizing: border-box;
			}
			.back_con{
				background: #FFFFFF;
				padding: 30rpx 16rpx;
				box-sizing: border-box;
				border-radius: 12rpx;
				
				/deep/ .u-preview-wrap{
					width: 170rpx !important;
					height: 170rpx !important;
				}
				
				/deep/ .u-add-wrap{
					width: 170rpx !important;
					height: 170rpx !important;
				}
			}
			.con_type{
				display: flex;
				justify-content: space-between;
				.con_item{
					background: #F8F8F8;
					border: 2rpx solid #9D9E9D;
					color: #9D9E9D;
					border-radius: 6rpx;
					padding: 18rpx 42rpx;
					font-size: 24rpx;
				}
				.con_active{
					border: 2rpx solid #0581FD;
					color: #0581FD;
				}
			}
			.histor{
				font-size: 28rpx;
				color: #0581FD;
				text-align: center;
				margin-top: 75rpx;
			}
		}
		
		.problem{
			position: fixed;
			z-index: 10;
			bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			background: #0581FD;
			font-size: 28rpx;
			color: #FFFFFF;
			padding: 40rpx 0;
			image{
				width: 38rpx;
				height: 38rpx;
				margin-right: 20rpx;
			}
			view{
				display: flex;
				align-items: center;
			}
		}
	}
</style>
